<template>
  <el-row>
    <el-col :span="6"> 用户：{{ store.userInfo.name }} </el-col>
    <el-col :span="6"> 年龄：{{ store.userInfo.age }} </el-col>
    <el-col :span="6"> token:{{ store.token }} </el-col>
    <el-col :span="6">
      <button @click="quitLogin">退出登录</button>
    </el-col>
  </el-row>
  <div class="content">
    <div
      class="content_zi"
      v-for="(item, index) of listData"
      :key="index"
      @click="goto(item)"
    >
      <h4>{{ item.name }}</h4>
      <el-button type="primary" plain>点击跳转查看</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store";

const router = useRouter();
const store = useUserStore();
let listData = ref([
  { name: "基础案例--", path: "/baseApp" },
  { name: "slotStudy", path: "/slotStudy" },
  { name: "exceljsDemo", path: "/exceljsDemo" },
  { name: "about", path: "/about" },
  { name: "vxeSelect-虚拟列表", path: "/vxeSelect" },
  { name: "axios", path: "/axios" },
  { name: "elementPlusSelect-虚拟列表", path: "/elementPlusSelect" },
  { name: "login", path: "/login" },

  { name: "404页面", path: "/404" },
]);

function goto(params: any) {
  router.push({ path: params.path });
}
function quitLogin(params: any) {
  localStorage.clear();

  router.push({ path: "/login" });
  ElMessage({
    message: "退出成功",
    type: "success",
  });
}
</script>

<style scoped>
.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  padding: 40px 20px;
  background: linear-gradient(135deg, #e0f7f7, #f9fafc); /* 浅青绿色到白渐变 */
  min-height: 100vh;
}

.content_zi {
  cursor: pointer;
  width: 280px;
  background: #fff; /* 纯白底 */
  border-radius: 20px;
  padding: 28px 24px;
  /* 蓝色偏暗阴影+橙色微光，层次丰富 */
  box-shadow: 0 6px 18px rgba(23, 108, 163, 0.15),
    0 3px 6px rgba(255, 130, 50, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content_zi:hover {
  transform: translateY(-10px);
  box-shadow: 0 14px 40px rgba(23, 108, 163, 0.3),
    0 6px 16px rgba(255, 130, 50, 0.25);
}

.content_zi h4 {
  font-weight: 700;
  font-size: 1.5rem;
  color: #176ca3; /* 经典蓝色 */
  margin-bottom: 26px;
  text-align: center;
  user-select: none;
  letter-spacing: 0.03em;
  /* 轻微文字阴影，增强层次 */
  text-shadow: 0 1px 2px rgba(23, 108, 163, 0.15);
}

.el-button {
  width: 100%;
  border-radius: 14px;
  font-weight: 700;
  background-image: linear-gradient(90deg, #ff8232, #ff5722); /* 橙色渐变 */
  color: #fff;
  border: none;
  box-shadow: 0 6px 16px #ff823266;
  transition: all 0.25s ease;
}

.el-button:hover {
  background-image: linear-gradient(90deg, #ff5722, #ff8232);
  box-shadow: 0 8px 20px #ff572244;
  color: #fff;
}
</style>
